<template>
  <div class="center-block">
  <section class="clearfix">
    <div class="swiperBox">
      <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
          <div v-for="(item,index) in list" class="swiper-slide" :style="{backgroundImage:'url('+item.imgSrc+')'}" :key="index"></div>
        </div>

      </div>
    </div>
    <div class="swiperRight">
      <dl class="Classified">
        <dt>一级分类</dt>
        <dd class="active"><i class="dtFont dtFont-tupian3"></i><span>效果图</span><small>8</small></dd>
        <dd><i class="dtFont dtFont-shijingtu"></i><span>实景图</span><small>12</small></dd>
        <dd><i class="dtFont dtFont-hangpai"></i><span>航拍图</span><small>8</small></dd>
        <dd><i class="dtFont dtFont-quanjing1"></i><span>3D全景图</span><small>8</small></dd>
      </dl>
      <dl class="Classified" style="padding-top: 25px">
        <dt>一级分类</dt>
        <dd><i class="dtFont dtFont-tupian3"></i><span>效果图</span><small>8</small></dd>
        <dd><i class="dtFont dtFont-shijingtu"></i><span>实景图</span><small>12</small></dd>
        <dd class="active"><i class="dtFont dtFont-hangpai"></i><span>航拍图</span><small>8</small></dd>
        <dd><i class="dtFont dtFont-quanjing1"></i><span>3D全景图</span><small>8</small></dd>
      </dl>
    </div>
  </section>

  <section class="relative">
    <div class="swiper-container gallery-thumbs">
      <div class="swiper-wrapper">
        <div class="swiper-slide" :class="index===0?'active-nav':''" v-for="(item,index) in list" >
          <div class="img" :style="{backgroundImage:'url('+item.imgSrc+')'}"></div>
          <h4>产业园二期效果图</h4>
        </div>
      </div>
    </div>


    <!-- Add Arrows -->
    <div class="vBtn swiper-button-next"><i class="dtFont dtFont-jiantou-copy"></i></div>
    <div class="vBtn swiper-button-prev"><i class="dtFont dtFont-jiantou"></i></div>
  </section>
  </div>
</template>

<script>
import Swiper from "swiper"
import { getPic } from '@/api/dataService'
export default {
  name: 'body',
  data () {
    return {
      list: []
    }
  },
  mounted () {


    this.getPic();

  },
  methods: {
    getPic (id){
      getPic(id).then(res => {
        console.log(res)
        let that = this
        this.list = res.rows
        setTimeout(function () {
          that.mySwiper()
        },0)
      })
    },
    mySwiper(){
      var viewSwiper = new Swiper('.gallery-top', {
        onSlideChangeStart: function() {
          updateNavPosition();
        }
      });
      $('.swiper-button-prev').on('click', function(e) {
        e.preventDefault();
        if(viewSwiper.activeIndex == 0) {
          viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
          return;
        }
        viewSwiper.swipePrev();
      });
      $('.swiper-button-next').on('click', function(e) {
        e.preventDefault();
        if(viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
          viewSwiper.swipeTo(0, 1000);
          return
        }
        viewSwiper.swipeNext();
      });
      var previewSwiper = new Swiper('.gallery-thumbs', {
        visibilityFullFit: true,
        slidesPerView: 'auto',
        onlyExternal: true,
        onSlideClick: function() {
          viewSwiper.swipeTo(previewSwiper.clickedSlideIndex);
        }
      });
      function updateNavPosition() {
        $('.gallery-thumbs .active-nav').removeClass('active-nav');
        var activeNav = $('.gallery-thumbs .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav');
        if(!activeNav.hasClass('swiper-slide-visible')) {
          if(activeNav.index() > previewSwiper.activeIndex) {
            var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1;
            previewSwiper.swipeTo(activeNav.index() - thumbsPerNav);
          } else {
            previewSwiper.swipeTo(activeNav.index());
          }
        }
      }
    }
  }
}
</script>
<style>
  @import "../../../assets/css/idangerous.swiper.css";
  .swiper-slide{
    height: 590px;
  }
</style>
